<template>
	<div class="listuser" id="app">
		<div class="container">
			<div class="handle-box">
				<el-row type="flex" justify="start">
					<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除</el-button>
					<el-input style="width: 250px;" v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
					<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
					<el-popover
					  placement="top"
					  width="280"
					  v-model="visible">
					  <el-row type="flex" style="margin-top: 10px;" justify="start">
						  <el-button disabled>账号</el-button>
						 <el-input style="width: 250px;" v-model="createUser.username" placeholder="用户名" class="handle-input mr10"></el-input>
					  </el-row>
						<el-row type="flex" style="margin-top: 10px;" justify="start">
							<el-button disabled>密码</el-button>
							<el-input style="width: 250px;" v-model="createUser.password" placeholder="密码" class="handle-input mr10"></el-input>
						</el-row>
					  <el-row type="flex" style="margin-top: 10px;" justify="start">
						  <el-button disabled>确认密码</el-button>
						  <el-input style="width: 280px;" v-model="createUser.again_password" placeholder="确认密码" class="handle-input mr10"></el-input>
					  </el-row>
					  <div style="text-align: right; margin: 0">
					    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
					    <el-button type="primary" size="mini" @click="visible = false; addUser()">确定</el-button>
					  </div>
					  <el-button style="margin-left: 10px;" slot="reference" type="success" icon="el-icon-user">添加用户</el-button>
					</el-popover>
				</el-row>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
			 @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
				<el-table-column prop="name" label="用户名" width="70"></el-table-column>
				<el-table-column label="手机号">
					<template slot-scope="scope">{{scope.row.money}}</template>
				</el-table-column>
				<el-table-column label="邮箱" align="center" >
					<template slot-scope="scope">{{scope.row.thumb}}
						<!-- <el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]"></el-image> -->
					</template>
				</el-table-column>
				<el-table-column label="昵称">
					<template slot-scope="scope">{{scope.row.fullname}}</template>
				</el-table-column>
				<el-table-column label="登录IP">
					<template slot-scope="scope">{{scope.row.login_ip}}</template>
				</el-table-column>
				<el-table-column prop="address" label="登陆时间" ></el-table-column>
				<el-table-column label="状态" align="center" width="70">
					<template slot-scope="scope">
						<el-tag :type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')">{{scope.row.state}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="date" label="注册时间" ></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
				 :total="pageTotals" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="form.thumb"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {mapState,mapMutations,mapActions} from 'vuex'
	export default {
		name: 'listuser',
		components: {},
		data() {
			return {
				visible: false,
				query: {
					address: '',
					name: '',
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				idx: -1,
				id: -1,
				createUser: {
					username: '',
					password: '',
					again_password: ''
					}
				}
			},
			computed:{
				...mapState(['token']),
				pageTotals(){ // 页
					return this.tableData.length
				}
			},
			methods: {
					// 获取 easy-mock 的模拟数据
					getData() {
						this.$http.get('/admin/admin?page=3',{headers:{'Authorization': 'Bearer ' + this.token}}).then((res)=>{
							console.log(res)
							for(var i=0;i<res.data.data.length;i++){
								var logtime = this.common.setTime(res.data.data[i].login_time)
								var lists = {
									id: res.data.data[i].id,
									money: res.data.data[i].phone,
									state: res.data.data[i].status,
									date: res.data.data[i].create_time.split(' ')[0],
									address: logtime.split(' ')[0],
									thumb: res.data.data[i].email,
									name: res.data.data[i].username,
									fullname: res.data.data[i].fullname,
									login_ip: res.data.data[i].login_ip
								}
								this.tableData.push(lists)
							}
							console.log(this.tableData)
							this.pageTotal = res.data.length
							}).catch((err)=>{
								console.log(err)
							});
					},
					addUser(){
						this.$http.post('/admin/reg',{
							username: this.createUser.username,
							password: this.createUser.username,
							again_password: this.createUser.again_password
						},{headers:{'Authorization': 'Bearer ' + this.token}}).then((res)=>{
							this.$notify({title: res.data.notice,message: '史诗由你开始!',type: 'success'});
							console.log(res)
							}).catch((err)=>{
								console.log(err)
							});
					},
					// 触发搜索{按钮
					handleSearch() {
						this.$set(this.query, 'pageIndex', 1);
						this.getData();
					},
					// 删除操作
					handleDelete(index, row) {
						// 二次确认删除
						this.$confirm('确定要删除吗？', '提示', {
								type: 'warning'
							})
							.then(() => {
								this.$message.success('删除成功');
								this.tableData.splice(index, 1);
							})
							.catch(() => {});
					},
					// 多选操作
					handleSelectionChange(val) {
						this.multipleSelection = val;
					},
					delAllSelection() {
						const length = this.multipleSelection.length;
						let str = '';
						this.delList = this.delList.concat(this.multipleSelection);
						for (let i = 0; i < length; i++) {
							str += this.multipleSelection[i].name + ' ';
						}
						this.$message.error(`删除了${str}`);
						this.multipleSelection = [];
					},
					// 编辑操作
					handleEdit(index, row) {
						this.idx = index;
						this.form = row;
						this.editVisible = true;
					},
					// 保存编辑
					saveEdit() {
						this.editVisible = false;
						this.$message.success(`修改第 ${this.idx + 1} 行成功`);
						this.$set(this.tableData, this.idx, this.form);
						// 获得修改项，发起修改请求
						console.log(JSON.stringify(this.form.thumb)+this.form.name+"编辑了")
					},
					// 分页导航
					handlePageChange(val) {
						this.$set(this.query, 'pageIndex', val);
						this.getData();
					}
				},
				beforeCreate: function() {
					console.log('1-beforeCreate 初始化之后')
				},
				created: function() {
					this.getData()
					console.log('2-created 创建完成')
				},
				beforeMount: function() {
					console.log('3-beforeMount 挂载之前')
				},
				mounted: function() {
					console.log('4-mounted 被创建')
				},
				beforeUpdate: function() {
					console.log('5-beforeUpdate 数据更新前')
				},
				updated: function() {
					console.log('6-updated 被更新后')
				},
				activated: function() {
					console.log('7-activated 激活的')
				},
				deactivated: function() {
					console.log('8-deactivated 暂停')
				},
				beforeDestroy: function() {
					console.log('9-beforeDestroy 销毁之前')
				},
				destroyed: function() {
					console.log('10-destroyed 销毁之后')
				}
		}
</script>

<style scoped>
	li{
		list-style: none;
		
	}
</style>
